<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
		<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/>
		<script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<!-- 
			表单
				常用属性：
					required  			浏览器固定的必填字段
					lay-verify  		需要验证的类型 （required表示必填项）
					class="layui-input" 	提供的通用的样式
					class="layui-input-block" 	占据全部宽度
					class="layui-input-inline" 	占据部分宽度
				文本框
					placeholder 	当文本框为空时，默认显示的文本信息
					autocomplete 	表单元素是否自动填充 （当浏览器中缓存中存在相同name属性的值时，会填充）
		 
			通过追加 layui-form-pane 的class，来设定表单的方框风格
		 
		 
		 -->
		
		<!-- 在一个容器中设定 class="layui-form" 来标识一个表单元素块 -->
		<form action="" class="layui-form layui-form-pane">
			<!-- 基本的行区块结构，它提供了响应式的支持。可以换成其他结构，但必须要在外层容器中定义class="layui-form"，form模块才能正常工作。 -->
			<div class="layui-form-item">
				<label class="layui-form-label">标题</label>
				<div class="layui-input-inline">
					<!-- 文本框 -->
					<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" />  
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">城市</label>
				<div class="layui-input-inline">
					<!-- 
						下拉选择框
							1. 通过selected属性设置默认选中项
							2. 通过disabled属性开启禁用，可以设置select和option标签（禁用下拉框和禁用下拉选项）
							3. 可以通过 optgroup 标签给select分组
							4. 通过设置lay-search属性开启搜索匹配功能
					 -->
					 <select name="city" lay-verify="required" >
					   <option value="">请选择一个城市</option>
					   <option value="010">北京</option>
					   <option value="021" selected>上海</option>
					   <option value="0571" disabled>杭州</option>
					 </select> 
					 <!-- 分组 -->
					 <select name="quiz">
					   <option value="">请选择</option>
					   <optgroup label="城市记忆">
					     <option value="你工作的第一个城市">你工作的第一个城市？</option>
					   </optgroup>
					   <optgroup label="学生时代">
					     <option value="你的工号">你的工号？</option>
					     <option value="你最喜欢的老师">你最喜欢的老师？</option>
					   </optgroup>
					 </select>
					 <!-- 开启搜索匹配 -->
					 <select name="city" lay-verify="" lay-search>
					   <option value ="">请选择</option>
					   <option value="010">layer</option>
					   <option value="021">form</option>
					   <option value="0571">layim</option>
					 </select> 
				</div>
			</div>
			

			<div class="layui-form-item">
				<label class="layui-form-label">爱好</label>
				<div class="layui-input-block">
					<!--
						复选框 
							1. 通过title属性设置自定义文本（如果不需要显示文本，则不设置title属性）
							2. 通过checked属性设置被选中的项
							3. 通过lay-skin属性设置复选框的样式效果（lay-skin="parmary"表示原始效果）
							4. 通过disabled属性禁用元素
					-->
					<!-- 默认效果 -->
					<input type="checkbox" name="hobby" title="唱歌" checked value="sing"  />  
					<input type="checkbox" name="hobby" title="跳舞" value="dance"/> 
					<input type="checkbox" name="hobby" title="Rap" disabled /> 
					<br>
					<!-- 原始效果 -->
					<input type="checkbox" name="hobby" title="唱歌" lay-skin="primary" checked value="sing" />  
					<input type="checkbox" name="hobby" title="跳舞" lay-skin="primary" value="dance"/> 
					<input type="checkbox" name="hobby" title="Rap" lay-skin="primary" disabled/>
				</div>
			</div>
			
			
			<div class="layui-form-item">
				<label class="layui-form-label">开关</label>
				<div class="layui-input-block">
					<!-- 	
						开关
							将复选框，设置lay-skin="switch"形成开关风格
							1. 通过lay-text="打开的值|关闭的值"来设定开关的两种状态的文本，通过"|"分隔
							2. 通过checked设置默认打开状态
							3. 通过disabled属性禁用开关
							4. 通过value属性设置选中的值
							
					 -->
					<input type="checkbox" name="aa" lay-skin="switch"  />   
					<input type="checkbox" name="bb" lay-skin="switch" checked  />
					<input type="checkbox" name="cc" lay-skin="switch" checked lay-text="on|off" />
					<input type="checkbox" name="dd" lay-skin="switch" checked lay-text="打开|关闭" value="打开" />
					<input type="checkbox" name="ee" lay-skin="switch" lay-text="打开|关闭" disabled  />
				</div>
			</div>
			
			
			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-block">
					<!-- 
						单选框
							1.通过checked设置默认选中项
							2. 通过disabled属性禁用单选框
							3. 通过value属性设置选中的值 
					 -->
					 <input type="radio" name="sex" value="nan" title="男" >
					 <input type="radio" name="sex" value="nv" title="女" checked>
					 <input type="radio" name="sex" value="" title="中性" disabled>
				</div>
			</div>
			
			
			<div class="layui-form-item">
				<label class="layui-form-label">简介</label>
				<div class="layui-input-inline">
					<!-- 
						文本域
							class="layui-textarea"：layui.css提供的通用CSS类 
					 -->
					<textarea name="remark" required lay-verify="required" placeholder="请输入个人简介"
					class="layui-textarea">
						
					</textarea>
					 
				</div>
			</div>
			
			<!-- 
				组装行内表单
					class="layui-inline"：定义外层行内
					class="layui-input-inline"：定义内层行内
			 -->
			 
			 <div class="layui-form-item">
				 <!-- 定义外层行内 -->
				 <div class="layui-inline">
					 <label class="layui-form-label">范围</label>
					 <div class="layui-input-inline">
						<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input"/>
					 </div>
					 <div class="layui-form-mid">-</div>
					 <div class="layui-input-inline">
					 	<input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input"/>
					 </div>
				 </div>
				 
				 <div class="layui-inline">
					 <label class="layui-form-label">密码</label>
					 <div class="layui-input-inline">
						<input type="password" name="upwd" placeholder="请输入密码" autocomplete="off" class="layui-input"/>
					 </div>
					 
				 </div>
				 
				 
			 </div>
			 
			 
			 <div class="layui-form-item">
			 	<label class="layui-form-label">原始效果</label>
			 	<div class="layui-input-inline">
			 		<!-- 可以对表单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格。 -->
			 		 <input type="radio" name="sex" value="nan" title="男" lay-ignore>
			 	</div>
			 </div>
			
			<!-- 按钮 -->
			<div class="layui-form-item">
			    <div class="layui-input-block">
			      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
			      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
			    </div>
			  </div>
		</form>
		
		<hr/><br>
		
		<!-- 通过追加 layui-form-pane 的class，来设定表单的方框风格。 -->
		<form class="layui-form  layui-form-pane" action="">
		  <!-- 
				内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性（否则		会看起来比较别扭），如： 
		  -->
		  <div class="layui-form-item" pane>
		    <label class="layui-form-label">单选框</label>
		    <div class="layui-input-block">
		      <input type="radio" name="sex" value="男" title="男">
		      <input type="radio" name="sex" value="女" title="女" checked>
		    </div>
		  </div>
		</form>
		
		
		<!-- 加载模块 -->
		<script type="text/javascript">
			// 加载form模块
			layui.use("form",function(){
				var form = layui.form;
			});		
		</script>
	</body>
</html>
